<template>
	<view class="paymentuse">
		<view class="container" v-if="recordTimes<=2">
			<view class="tips_content">
				{{tips}}
			</view>
			<view class="input-container">
				<view class="input-box" v-for="(item, index) in codeArr" :key="index"
					:class="{ active: currentFocusIndex === index }">
					{{ item || '' }}
				</view>
			</view>

			<view class="keyboard">
				<view class="keyboard-row" v-for="(row, rowIndex) in keyboardLayout" :key="rowIndex">
					<view class="keyboard-key" v-for="(key, keyIndex) in row" :key="keyIndex"
						@tap="handleKeyPress(key)">
						{{ key }}
					</view>
				</view>
				<view class="keyboard-row">
					<view class="keyboard-key empty"></view>
					<view class="keyboard-key" @tap="handleKeyPress('0')">0</view>
					<view class="keyboard-key" @tap="handleKeyPress('delete')">
						<image style="width: 60rpx;height: 60rpx;" src="./static/delback.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>

		<view class="setOk" v-if="recordTimes>2">
			<image src="./static/setOk.png" mode=""></image>
			<view class="set_text">
				修改成功
			</view>
		</view>
	</view>
</template>

<script>
	import {
		toast
	} from '../uni_modules/uview-plus'

	export default {
		data() {
			return {
				codeArr: ['', '', '', '', '', ''], // 6位验证码数组
				currentFocusIndex: 0, // 当前聚焦的输入框索引
				keyboardLayout: [
					['1', '2', '3'],
					['4', '5', '6'],
					['7', '8', '9']
				],
				tips: "请输入支付密码", //请输入支付密码 请再次输入支付密码
				isLoad:false,
				recordTimes: 1,
				password: "",
				passwordAgain: ""
			}
		},
		methods: {
			// 键盘按键处理
			handleKeyPress(key) {
				if(this.isLoad){
					return 
				}
				
				if (key === 'delete') {
					this.handleDelete()
				} else if (this.currentFocusIndex <= 5) {
					this.codeArr[this.currentFocusIndex] = key
					if (this.currentFocusIndex < 5) {
						this.currentFocusIndex++
						return
					}
					console.log('this.currentFocusIndex', this.currentFocusIndex)
					console.log('this.recordTimes', this.recordTimes)
					if (this.currentFocusIndex === 5 && this.recordTimes === 1) {
						this.isLoad = true
						toast("请再次输入密码!")
						this.tips = "请再次输入支付密码"
						this.password = this.codeArr.join("")
						this.codeArr = ['', '', '', '', '', '']
						this.recordTimes += 1
						setTimeout(() => {
							this.currentFocusIndex = 0
							this.isLoad = false
						}, 1000)
					} else if (this.currentFocusIndex === 5 && this.recordTimes === 2) {
						this.passwordAgain = this.codeArr.join("")

						console.log("this.passwordAgain", this.passwordAgain)
						console.log("this.password", this.password)

						if (this.password === this.passwordAgain) {
							toast("输入密码完毕!")
							this.isLoad = true
							setTimeout(()=>{
								this.recordTimes += 1
								this.isLoad = false
							},1500)
						} else {
							toast("两次输入密码不一致!")
							this.isLoad = true
							setTimeout(()=>{
								this.isLoad = false
							},1500)
						}


					}
				}
			},
			// 删除处理
			handleDelete() {
				if (this.currentFocusIndex > 0) {
					this.codeArr[this.currentFocusIndex] = ''
					this.currentFocusIndex--
					// this.codeArr[this.currentFocusIndex] = ''
				} else if (this.currentFocusIndex === 0) {
					this.codeArr[0] = ''
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tips_content {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #555555;
		text-align: center;
		margin: 8vh 0 48px 0;
	}

	.container {
		padding: 40rpx;
		display: flex;
		flex-direction: column;
		// height: 100vh;
	}

	/* 6位输入框样式 */
	.input-container {
		display: flex;
		justify-content: space-between;
		margin-bottom: 80rpx;
		padding: 0 40rpx;

		.input-box {
			width: 80rpx;
			height: 80rpx;
			border: 2rpx solid #ddd;
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 40rpx;
			font-weight: bold;
			background-color: #FFF9F5;
			;

			&.active {
				border-color: #ff8c00;
				background-color: #FFE5D7 !important;
				/* 浅橙色背景 */
			}
		}
	}

	/* 键盘样式 */
	.keyboard {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #f5f5f5;
		padding: 20rpx 0;
		border-top: 1rpx solid #eee;

		.keyboard-row {
			display: flex;
			justify-content: space-around;
			margin-bottom: 20rpx;
			padding: 0 20rpx;

			&:last-child {
				margin-bottom: 0;
			}
		}

		.keyboard-key {
			width: 200rpx;
			height: 90rpx;
			background-color: #fff;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 36rpx;
			font-weight: bold;
			box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);

			&:active {
				background-color: #e6e6e6;
			}

			&.empty {
				visibility: hidden;
			}
		}
	}

	.setOk {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: 315rpx;

		image {
			width: 120rpx;
			height: 120rpx;
			margin-bottom: 29rpx;
		}

		.set_text {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			text-align: center;
		}
	}
</style>